<template>
  <div class="bg">
    <!-- 自定义指令：
    全局自定义指令：
        vue.directive("指令名",{
          指令的生命周期
          bind:绑定时:指令所在dom已读取，但还没有绑定，类似于beforeMount
          inserted:渲染时，指令所在dom添加到父节点时执行，类似于mounted
          update:更前时，不保证更新完成，可能更新完成也可能没更新完成，只能代表指令所在组件有更新
          componentUpdated:更新完成时，指令所在组件包括子组件都更新完成时执行，类似于updated
          unbind:销毁后，指令所在dom销毁时会执行，类似于destroyed，常用于善后工作 setInterval  scroll ....
          bind(dom,obj,vnode){
            dom:指令所在dom
            obj:{
              属性名
              修饰符
              值:value
            }
            vnode:指令所在dom的节点信息，虚似dom信息,包含指令所在组件的实例对象（this）
                  context:指令所在组件的实例对象(this)
          }
        })
        使用： v-指令名:属性名.修饰符="值"
              v-on:keyup.enter="function"

    局部自定义指令
       directives:{
          指令名:{
            指令的生命周期
          }
       }
     -->
    <input v-test:abc.xxx="num" type="text">
    <button @click="btnClick">修改avatar</button>

    <button @click="bol = !bol">销毁img</button>
    <img v-if="bol" v-showUrl="avatar" alt="">
  </div>
</template>
<script>
export default {
  directives: {
    test: {
      bind(dom, obj, vnode) {
        console.log(dom)
        console.log(obj)
        console.log(vnode)
      },
      inserted(dom) {
        dom.focus()
      }
    },
    showUrl: {
      inserted(dom, obj) {
        dom.src = obj.value || require('@/assets/common/head.jpg')
      },
      componentUpdated(dom, obj) {
        dom.src = obj.value || require('@/assets/common/head.jpg')
      },
      unbind(dom, obj) {
        console.log('unbind')
      }
    }
  },
  data() {
    return {
      bol: true,
      num: 999,
      avatar: require('@/assets/common/banner-64.png')
    }
  },
  methods: {
    btnClick() {
      this.avatar = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.bg {
  background-color: #ccc;
}
</style>
